<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>纯前端实现上传图像本地预览</title>
	<style>
		button {
			width: 100px;
			height: 20px;
			background-color: #ccc;
			border: 0;
			color: #f40;
		}
		img {
			width: 500px;
		}
	</style>
</head>

<body>
	<input type="file" style="display: none;">
	<button>上传</button>
	<img src="" alt="">
	<script>
		const btn = document.querySelector('button')
		const file = document.querySelector('input')
		const img = document.querySelector('img')
		// 点击按钮触发了file的点击  移花接木
		btn.onclick = function () {
			file.click()
		}
		// 获取上传的文件 可以监听file元素change事件
		file.onchange = function (e) {
			console.log(e.target.files[0])  // 文件的上传列表[0]
			// URL.createObjectURL可以生成一个临时路径
			const str = URL.createObjectURL(e.target.files[0])
			console.log(str)
			// img.src = '路径'
			img.src = str
		}

		// fileReader
	</script>
</body>

</html>